import axios from "axios"
// qs 模块是安装 axios 模块的时候就有的，不用另行安装，通过 import 引入即可使用
import qs from 'qs'
import {
  ElLoading,
  ElMessage
} from 'element-plus'
// 引入storage模块，操作token
import SStorage from '../utils/storage.js'

const instance = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 5000,
  // 设置自定义请求头，加上'X-Requested-With': 'XMLHttpRequest'后，php端的
  //if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')) {
  //就生效了，
  headers: {
    /*  此注释部分为没增加qs模块时，只加了'X-Requested-With': 'XMLHttpRequest'它，能够进入PHP的ajax分支
    'Content-Type': 'application/json;charset=UTF-8;',   //只有这个时，php不能进入if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])...分支
    'X-Requested-With': 'XMLHttpRequest'  //加上此行后，php能进入if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])...分支
    */

    //引入qs后，代码如下
    'Content-Type': 'application/x-www-form-urlencoded', 
    'X-Requested-With': 'XMLHttpRequest'  //加上此行后，php能进入if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])...分支
  },
});

let loading
//正在请求的数量
let requestCount = 0
//显示loading
const showLoading = () => {
  if (requestCount === 0 && !loading) {
    loading = ElLoading.service({
      text: "Loading  ",
      background: 'rgba(0, 0, 0, 0.7)',
      spinner: 'el-icon-loading',
    })
  }
  requestCount++;
}
//隐藏loading
const hideLoading = () => {
  requestCount--
  if (requestCount == 0) {
    loading.close()
  }
}

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    showLoading()
    // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
    // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

    // 先实例化调用一下，是使用sessionStorage，还是localStorage，默认为localStorage
    let session = new SStorage('session');    //这里使用sessionStorage
    session.set("userinfo", { id: 1001, name: 'zzz' });   //存储数据
    let token = session.get("userinfo");   //获取数据
    console.log(token);

    token && (config.headers.Authorization = token)

    //引入qs模块后的代码
    //将请求数据转换成功 formdata 接收格式，
    //若请求方式为post
    if (config.method.toUpperCase() === 'POST') {
      //引入qs前代码，则将data参数转为JSON字符串
      // config.data = JSON.stringify(config.data);

      // 将请求数据转换成功 formdata 接收格式，引入qs后代码
      config.data = qs.stringify(config.data)
    }
    return config;
  },  
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  (response) => {
    hideLoading()

    if(response.status === 200){
      return Promise.resolve(response.data)
    } else {
      return Promise.reject(response.data)
    }
    // 对响应数据做点什么
  },
  // 服务器状态码不是200的情况
  (error) => {
    //响应错误
    if(error.response&&error.response.status){
	   const status = error.response.status
	    switch (status) {
        case 400:
          message = '请求错误(400)';
          break;
        case 401:
          message = "未授权，请重新登录(401)";
          break;
        case 403:
          message = "拒绝访问(403)";
          break;
        case 404:
          message = '请求地址出错(404)';
          break;
        case 408:
          message = '请求超时(408)';
          break;
        case 500:
          message = '服务器错误(500)';
          break;
        case 501:
          message = '服务未实现(501)';
          break;
        case 502:
          message = '网关错误(502)';
          break;
        case 503:
          message = '服务不可用(503)';
          break;
        case 504:
          message = '网关超时(504)';
          break;
        case 505:
          message = 'HTTP版本不受支持(505)';
          break;
        default:
          message = '请求失败'
	    }
      ElMessage.error(message);
    }
    return Promise.reject(error);
  }
)

export default instance
